<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ball-move</title>
    <script type="text/javascript">
        function drawBall(){
            //这里有一个非常重要的知识点.
            //如果你在函数中，没有用var定义就直接使用变量，就意味着使用的全局变量
            //如果在函数中， 定义了 才使用该变量，说明使用的局部变量
            //画出红色圆球
            //一定要beginPath()建立新路径，这里可以把beginPath去掉看看诡异效果
            cxt.beginPath();
            cxt.fillStyle="#FF0000";
            cxt.arc(ballX,ballY,20,0,Math.PI*2,true);
            //cxt.closePath();
            cxt.fill();
        }
        function move(){//不能放在body之内
            //怎么知道，玩家按下的是什么键
            //说明当按下键后 事件--->event对象----->事件处理函数()
            var code=event.keyCode;//对应字母的ascii码->我们看码表
            switch(code){
                case 38://上
                    ballY-=3;
                    break;
                case 39:
                    ballX+=3;
                    break;
                case 40:
                    ballY+=3;
                    break;
                case 37:
                    ballX-=3;
                    break;
			}
            //把画布清理
            cxt.clearRect(0,0,300,150);  //这里可以注释掉试一下神奇的效果^_^
            //重新绘制
            drawBall();
        }
    </script>
</head>
<body onkeydown="move()">
    <h1>小球上下左右移动</h1>
    <canvas id="myca"  style="background-color:black">
    </canvas>
    <script>
        //得到画布
        var canvas1=document.getElementById("myca");
        var cxt=canvas1.getContext("2d");
        var ballX=30, ballY=30;
        drawBall();
        //现在按 w->"向上" d="右" s="下" a=>"左" 可以移动小球
        //说明: 当我们按下一个键，实际上触发一个 onkeydown
    </script>

</body>
</html>